<template>
  <div>
    <h2>当前求和为：{{ sum }}</h2> <br>
    <select v-model.number="number">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    &nbsp;
    <button @click="increment">+</button>&nbsp;
    <button @click="minus">-</button>&nbsp;
    <button @click="incrementOdd">奇数在加</button>&nbsp;
    <button @click="incrementAsync">异步加</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            sum:0,
            number:1
        }
    },
    methods: {
        increment(){
            this.sum +=this.number;
        },
        minus(){
            this.sum -=this.number;
        },
        incrementOdd(){
            if(this.number%2===0){
                this.sum +=this.number;
            }
        },
        incrementAsync(){
           setTimeout(()=>{
               this.sum +=this.number;
           },500); 
        }
    },
}
</script>

<style>
</style>